<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>

    <button class="add">添加节点</button>
    <button class="del">删除节点</button>
    <script>
        document.querySelector('.add').addEventListener('click', function() {
            // 添加节点- 创建 a 标签
            const a = document.createElement('a')

            // 设置内容
            // a.innerHTML = '🥦🥚'
            a.innerHTML = '🥦🍅'
            a.href = 'https://www.baidu.com'

            // 创建完毕的节点，还没有添加到页面上，需要调用 append
            const body = document.querySelector('body')

            // 在指定元素的末尾添加
            // body.append(a)

            // 开头添加
            body.prepend(a)
        })

        // 选择器用的不是标签选择器，无法推断出是什么标签
        // 可能没有提示
        document.querySelector('.del').addEventListener('click', function() {
            // 自己删掉自己
            // this.remove()
            // document.querySelector('body').remove()
            // 找到 所有 span，一个一个删掉
            const spanArr = document.querySelectorAll('span')
                // spanArr.forEach(item => {
                //   item.remove()
                // })

            // 每隔一秒钟，删掉一个
            spanArr.forEach((item, index) => {
                // console.log(index)
                // item.remove()
                setTimeout(() => {
                    item.remove()
                }, (index + 1) * 1000)
            })
        })
    </script>
</body>

</html>